<template>
  <div class="user-add">
    <el-row>
      <el-col :span="12">
        <!--        表单-->
        <el-form ref="ruleForm" :model="form" label-width="80px" :rules="rules">
          <!--          rolename-->
          <el-form-item label="角色名称" prop="rolename">
            <el-input v-model="form.rolename"></el-input>
          </el-form-item>
          <!--          角色权限-->
          <el-form-item label="角色权限">
            <el-tree
              ref="tree"
              :data="menuList"
              node-key="id"
              :props="defaultProps"
              show-checkbox
              :accordion="true"
              :highlight-current="true"
              @check-change="getCheckedKeys"
              :default-checked-keys="currentCheck"
            >
            </el-tree>
          </el-form-item>

          <!--          状态-->
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#f00"
              inactive-color="#eee"

            ></el-switch>
          </el-form-item>
          <!--          提交 修改-->
          <el-form-item v-if="typeof $route.params.id == 'undefined'">
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          </el-form-item>
          <el-form-item v-else>
            <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: "vUserAdd",
    mounted() {
      this.$store.dispatch('updatamenu')//必须请求的菜单列表 否者为空
      if (this.$route.params.id) {// 判断动态路由路由id参数请求单个角色详情
        this.axios({
          url: '/api/roleinfo',
          params: {id: this.$route.params.id},
          method: 'get'
        }).then(res => {
          // console.log(res.list, '角色详情')
          this.currentCheck = res.list.menus.split(',')//序列化该角色拥有的权限
          for(var a =0 ; a < this.menuList.length; a++) {
            for(var b =0; b < this.currentCheck.length; b++) {
              if(this.menuList[a].id == this.currentCheck[b]) {
                this.currentCheck.splice(b,1)
                b--
              }
            }
          }
          this.form = res.list
          this.form.id = this.$route.params.id //手动添加上id 提交时需要
        })
      }
    },
    data() {
      return {
        form: {rolename: '',menus: '',status: 1},
        rules: {rolename: [
            {required: true, message: '请输入角色名', trigger: 'blur'}
          ]},
        defaultProps: {children: 'children',label: 'title'},
        currentCheck: [],//该角色拥有权限的id
      }
    },
    computed: {
      ...mapState(['roleList', 'menuList'])
    },
    methods: {
      //选中字节点 的key 参数true 值选中选中的不包括父级没点的
      getCheckedKeys() {
        let zi = this.$refs.tree.getCheckedKeys()//返回选中子节点的key
        let fu =this.$refs.tree.getHalfCheckedKeys()//返回选中子节点的父节点的key
        let new1 = zi.concat(fu)
        this.form.menus = new1.join(',')
      },
      //提交表单功能
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('确定添加/修改该角色?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {//确定后，发送请求
              //判断名称rolename是否和重复
              // if(this.roleList.some(item => {return item.rolename.trim() == this.form.rolename.trim()})){
              //   this.$message({
              //     type: 'success',
              //     message: '角色名称重复！'
              //   });
              //   return false
              // }
              let url = this.$route.params.id? '/api/roleedit': '/api/roleadd'
              this.axios({
                method: 'post',
                url:url,
                data: this.form
              }).then(res => {
                if (res.code == 200) {
                  this.$store.dispatch('updaterole')
                  this.$message({
                    type: 'success',
                    message: res.msg
                  });
                  this.$router.go(-1)
                } else {
                  this.$message({
                    type: 'success',
                    message: res.msg
                  });
                }
              })

            })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '取消操作'
                });
              });
          } else {
            this.$message({
              type: 'info',
              message: '信息填写错误'
            });
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
